<template>
  <div class="ercode">
    <h1>请打开微信扫一扫</h1>
    <img v-bind:src = "imgUrl"/>
    <h1>{{remark}}</h1>
  </div>
</template>
<script>
  import { XTable } from 'vux'

  export default {
    components: {
      XTable
    },
    mounted: function () {
      this.$http.get('/wx/WxLoginController.do?getUuidFromWx')
        .then(function (res) {
          var url = 'https://login.weixin.qq.com/qrcode/'
          var uuid = res.body.uuid
          var timestamp = (new Date()).valueOf()
          this.imgUrl = url + uuid + '?_=' + timestamp + '&t=webwx'
          this.uuid = uuid
          this.initWxInfo({wxInfo: {uuid: this.uuid, imgUrl: this.imgUrl}})
        })
      this.interval = setInterval(() => {
        if (this.uuid !== '') {
          this.$http.get('/wx/WxLoginController.do?getWxLoginUuidStatus&uuid=' + this.uuid)
            .then(function (res) {
              console.log(res.body.result)
              if (res.body.result.status === '1') {
                clearInterval(this.interval)
                localStorage.uuid = this.uuid
              }
              this.status = res.body.result.status
              this.remark = res.body.result.remark
            })
        }
      }, 2000)
    },
    methods: {
    },
    data () {
      return {
        uuid: '',
        status: '',
        remark: '未登录',
        interval: Object,
        imgUrl: String
      }
    }
  }
</script>

<style scoped>
  .ercode{
    width: 300px;
    height: 100%;
    margin: 120px auto;
    display: block;
    padding:20px;
    cursor: default;
    background: #fff url(http://tympanus.net/Tutorials/OriginalHoverEffects/images/bgimg.jpg) repeat;
    -webkit-box-shadow:0 5px 10px #666;
    -moz-box-shadow:0 5px 10px #666;
    box-shadow:0 5px 10px #666;
    -moz-border-radius:5px;
    -webkit-border-radius:5px;
    -o-border-radius:5px;
    border-radius:5px;
  }
</style>
